<!--
    作业详情
    梁
    2019年5月15日
    -->
<template lang="pug">
  kalix-master
    div.box
      div.boxLeft
        UserUnit
        Personage
      div.boxRight
        h1 我的作业
        div.TestName
          p 作业名称
          div
            span 题量: 2
            span 满分: 100
            span 考试人数: 10
            span 已交: 10
          div
            span 创建人: 授课教师
            span 发送对象: 班级
            span 有效事件: 2019-04-11至2019-04-18
          div.fen
            span.quantity 0
            span 份待批
        div.ulTitle
          template.eltemplate
            el-table(:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            stripe
            style="width: 100%"
            :default-sort = "{prop: 'date', order: 'descending'}"
            ).el-table
              el-table-column(prop="date" label="序号"  width="106")
              el-table-column(prop="name" label="姓名"  width="106")
              el-table-column(prop="student" label="学号"  width="106")
              el-table-column(prop="time" label="提交时间"  width="106")
              el-table-column(prop="duration" label="时长"  width="106")
              el-table-column(prop="accuracy" label="正确率"  width="106")
              el-table-column(prop="score" label="分数"  width="106")
              el-table-column(label="操作"  width="106").right
                el-button(type="text" size="small") 查看
                el-button(type="text" size="small") 重考
          div.paging
            el-pagination(
            @size-change="handleSizeChange"
            @current-change="current_change"
            :page-size="100"
            layout="prev, pager, next, total, jumper"
            :total="total")
    div.clearfix
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'JobDetails',
    data() {
      return {
        isIndex: 0,
        total: 1000, // 默认数据总数
        pagesize: 10, // 每页的数据条数
        currentPage: 1, // 默认开始页面
        tableData: [
          {
            date: 0,
            name: '智信',
            student: 102654,
            time: '2019-04-15',
            duration: 30,
            accuracy: '80%',
            score: 80
          },
          {
            date: 0,
            name: '智信',
            student: 102654,
            time: '2019-04-15',
            duration: 30,
            accuracy: '80%',
            score: 80
          },
          {
            date: 0,
            name: '智信',
            student: 102654,
            time: '2019-04-15',
            duration: 30,
            accuracy: '80%',
            score: 80
          },
          {
            date: 0,
            name: '智信',
            student: 102654,
            time: '2019-04-15',
            duration: 30,
            accuracy: '80%',
            score: 80
          },
          {
            date: 0,
            name: '智信',
            student: 102654,
            time: '2019-04-15',
            duration: 30,
            accuracy: '80%',
            score: 80
          },
          {
            date: 0,
            name: '智信',
            student: 102654,
            time: '2019-04-15',
            duration: 30,
            accuracy: '80%',
            score: 80
          },
          {
            date: 0,
            name: '智信',
            student: 102654,
            time: '2019-04-15',
            duration: 30,
            accuracy: '80%',
            score: 80
          },
          {
            date: 0,
            name: '智信',
            student: 102654,
            time: '2019-04-15',
            duration: 30,
            accuracy: '80%',
            score: 80
          },
          {
            date: 0,
            name: '智信',
            student: 102654,
            time: '2019-04-15',
            duration: 30,
            accuracy: '80%',
            score: 80
          },
          {
            date: 0,
            name: '智信',
            student: 102654,
            time: '2019-04-15',
            duration: 30,
            accuracy: '80%',
            score: 80
          }
        ]
      }
    },
    methods: {
      current_change: function (currentPage) {
        this.currentPage = currentPage
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .box
    width 1200px
    margin 5px auto

  h1
    font-size 20px
    color #FF9933
    margin-bottom 36px

  .boxRight
    width 926px
    height 1471px
    border 1px solid #ccc
    border-radius 5px
    float right
    padding 20px 20px 0 24px
    box-sizing border-box

  .boxLeft
    width 247px
    height 1471px
    float left

  .boxLeftBottom
    width 247px
    height 1140px
    .personage
      display block
      width 247px
      height 60px
      line-height 60px
      text-align center
      border 1px solid #ccc
      background-color #F2F2F2
      cursor pointer
      position relative
      -o-user-select none /*文字禁止被选中*/
      -moz-user-select none /*火狐 firefox*/
      -webkit-user-select none /*webkit浏览器*/
      -ms-user-select none /*IE10+*/
      -khtml-user-select none /*早期的浏览器*/
      user-select none
      .icon
        position absolute
        width 20px
        height 20px
        top 1px
        left 56px
        font-size 22px
        color #333333
    .listBorder
      border none
      border-left 4px solid #FF9933
      background-color #fff
      span
        color #FF9933 !important
    .text
      color #666666
      font-size 18px

  .TestName
    width 850px
    height 135px
    border 1px solid #999
    padding 28px 0 0 22px
    box-sizing border-box
    position relative
    p
      margin-bottom 10px
    div
      margin-bottom 10px
      span
        font-size 14px
        color #999
        margin-right 16px
    .fen
      position absolute
      top 42px
      right 20px
      .quantity
        font-size 54px
        color red
      span
        font-size 14px
        color #000

  .paging
    position absolute
    left 50%
    bottom 10px
    margin-left -355px

  .ulTitle
    height 700px
    position relative

</style>
<style lang="stylus" rel="stylesheet/stylus">
  .ulTitle .el-table .cell
    text-align center
</style>
